<template>
  <panel title="最近7天开门次数统计">
    <div class="ml20 mr20">
      <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
    </div>
  </panel>
</template>

<script>
import formatDate from 'filters/format-date'

export default {
  name: 'accessControlSoutheastHistory',
  props: ['history', 'controlInfo'],

  data () {
    return {
      chartWidth: '400px',
      chartHeight: '230px',
      floorDatasDefault: {
      }
    }
  },

  computed: {
    chartOptions () {
      // let tovcSevenHistory = this.$store.getters.tovcSevenHistory
      let timeData = []
      let data = []
      for (let i = 7, len = 0; i > len; i--) {
        timeData.push(formatDate(new Date() - 60 * 1000 * 60 * 24 * i, 'MM-dd', true))
        if (this.controlInfo && this.controlInfo.id && this.controlInfo.list) {
          let find = _.find(this.controlInfo.list, (res) => {
            return res.openDate === formatDate(new Date() - 60 * 1000 * 60 * 24 * i, 'yyyy-MM-dd', true)
          })
          if (find) {
            data.push(find.count)
          } else {
            data.push(0)
          }
        } else {
          data.push(0)
        }
      }
      return {
        grid: {
          left: '1%',
          right: '4%',
          bottom: '6%',
          top: '20%',
          containLabel: true
        },
        tooltip: {},
        legend: {
          data: '开门次数',
          textStyle: {
            color: '#fff'
          }
        },
        yAxis: [{
          type: 'value'
          // 没有数据的时候默认显示1
          // min: 'dataMin',
          // max: 'dataMax',
          // interval: 1
        }],
        xAxis: [{
          type: 'category',
          data: timeData
        }],
        series: [
          {
            name: '开门次数',
            type: 'line',
            // data: [40, 50, 60, 45, 50, 56, 59]
            data: data
          }
        ]
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    }
  }
}
</script>
